$(function () {
  var form = layui.form

  // 加载文章分类的列表数据
  function loadCateList () {
    $.ajax({
      type: 'get',
      url: 'my/article/cates',
      success: function (res) {
        // 获取列表数据,然后基于模板引擎渲染页面
        var result = template('cate-tpl', res)
        $('.layui-table tbody').html(result)
      }
    })
  }
  loadCateList()

  // 监听删除分类的按钮事件
  $('.layui-table tbody').on('click', '.layui-btn-danger', function (e) {
    // 获取要删除的文章分类的id
    var id = $(e.target).data('id')
    // 调用接口进行删除
    $.ajax({
      type: 'get',
      url: 'my/article/deletecate/' + id,
      data: {id: id},
      success: function (res) {
        if (res.status === 0) {
          // 删除成功，提示一下，刷新列表
          layer.msg(res.message)
          loadCateList()
        }
      }
    })
  })

  // 监听编辑分类按钮的事件
  $('.layui-table tbody').on('click', '.edit-cate', function (e) {
    // 获取要编辑的分类的id
    var id = $(e.target).data('id')
    // 根据id查询分类的详细信息
    $.ajax({
      type: 'get',
      url: 'my/article/cates/' + id,
      data: {id: id},
      success: function (res) {
        // 把查询出的数据填充到弹出层当中
        var editIndex = layer.open({
          type: 1,
          title: '编辑文章分类',
          content: $('#edit-form-tpl').html(),
          area: ['500px', '250px']
        })
        // 填充表单数据
        form.val('editForm', res.data)

        // 监听编辑文章分类的表单提交事件
        $('#edit-form').submit(function (e) {
          e.preventDefault()
          // 获取表单数据
          var fd = $(this).serialize()
          // 提交表单更新分类信息
          $.ajax({
            type: 'post',
            url: 'my/article/updatecate',
            data: fd,
            success: function (res) {
              if (res.status === 0) {
                // 更新分类成功：提示信息，关闭弹出层，刷新列表
                layer.msg(res.message)
                layer.close(editIndex)
                loadCateList()
              }
            }
          })
        })
      }
    })
  })


  // 添加新的分类
  $('#add-cate').click(function () {
    // 基于弹出层方式进行分类添加
    var addIndex = layer.open({
      // 弹出层类型
      type: 1,
      // 弹出层标题
      title: '添加文章类别',
      // 弹出层的内容
      content: $('#add-form-tpl').html(),
      // 弹出层的宽度和高度
      area: ['500px', '250px']
    })

    // 绑定添加分类的事件
    $('#add-form').submit(function (e) {
      e.preventDefault()
      $.ajax({
        type: 'post',
        url: 'my/article/addcates',
        data: $(this).serialize(),
        success: function (res) {
          // 添加文章成功
          if (res.status === 0) {
            // 关闭弹出并且刷新列表
            layer.msg(res.message)
            layer.close(addIndex)
            loadCateList()
          }
        }
      })
    })
  })

})